/* unused, only reference */
.t1 {
  color: #E94134;      
}
.t2 {
  color: #4385F6;
}
.t3 {
  color: #33A754;
}
.t4 {
  color: #FBBD06;
}

/* custom style begin */
.container {
overflow-x: hidden;
padding-top: 160px;
}

header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #1d1f21;
border-bottom: 1px solid rgb(51, 51, 51);
height: 160px;
z-index: 100;
}

.logo {
width: 220px;
margin: 0 auto;
padding-top: 20px;
/* border: 1px solid burlywood; */
}

.headerBtns {
text-align: center;
vertical-align: middle;
width: 400px;
margin: 10px auto;
z-index: 10;
}

.headerBtn {
margin: 5px;
display: inline-block;
text-align: center;
width: 100px;
color: #c5c8c6;
border: 1px solid #1d1f21;
border-radius: 8px;
cursor: default;
text-decoration: none;
}

.headerBtn:hover {
color: burlywood;
border: 1px solid burlywood;
}

#header-canvas {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
/* border: red 1px solid; */
}

.headerPannel {
position: absolute;
top: 0;
left: 0;
/* border: #4385F6 1px solid; */
width: 100%;
}

/* markdown render */
pre {
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
line-height: 1.5;
tab-size: 4;
hyphens: none;
color: #c5c8c6;
background-color: #27292c !important;
border: #43484c;
border-radius: 3px;
}

pre[class*='language-'] {
padding: 1em;
}

code[class*='language-'] .token.comment,
pre[class*='language-'] .token.comment,
code[class*='language-'] .token.prolog,
pre[class*='language-'] .token.prolog,
code[class*='language-'] .token.doctype,
pre[class*='language-'] .token.doctype,
code[class*='language-'] .token.cdata,
pre[class*='language-'] .token.cdata {
color: #7c7c7c;
}

code[class*='language-'] .token.punctuation,
pre[class*='language-'] .token.punctuation {
color: #96cbfe;
}

code[class*='language-'] .namespace,
pre[class*='language-'] .namespace {
opacity: 0.7;
}

code[class*='language-'] .token.constant,
pre[class*='language-'] .token.constant {
color: #99cc99;
}

code[class*='language-'] .token.boolean,
pre[class*='language-'] .token.boolean,
code[class*='language-'] .token.number,
pre[class*='language-'] .token.number,
code[class*='language-'] .token.function-name,
pre[class*='language-'] .token.function-name {
color: #ff73fd;
}

code[class*='language-'] .token.tag,
pre[class*='language-'] .token.tag {
color: #96cbfe;
}

code[class*='language-'] .token.selector,
pre[class*='language-'] .token.selector {
color: #96cbfe;
}

code[class*='language-'] .token.attr-name,
pre[class*='language-'] .token.attr-name {
color: #c6c5fe;
}

code[class*='language-'] .token.string,
pre[class*='language-'] .token.string {
color: #a8ff60;
}

code[class*='language-'] .token.char,
pre[class*='language-'] .token.char {
color: #ff8000;
}

code[class*='language-'] .token.entity,
pre[class*='language-'] .token.entity {
color: #ffd2a7;
}

code[class*='language-'] .token.url,
pre[class*='language-'] .token.url {
color: #7c7c7c;
}

code[class*='language-'] .token.operator,
pre[class*='language-'] .token.operator {
color: #ededed;
}

code[class*='language-'] .token.atrule,
pre[class*='language-'] .token.atrule,
code[class*='language-'] .token.attr-value,
pre[class*='language-'] .token.attr-value,
code[class*='language-'] .token.keyword,
pre[class*='language-'] .token.keyword {
color: #cfcb90;
}

code[class*='language-'] .token.function,
pre[class*='language-'] .token.function {
color: #ffd2a7;
}

code[class*='language-'] .token.class-name,
pre[class*='language-'] .token.class-name {
color: #ffd2a7;
}

code[class*='language-'] .token.variable,
pre[class*='language-'] .token.variable {
color: #c6c5fe;
}

code[class*='language-'] .token.regex,
pre[class*='language-'] .token.regex,
code[class*='language-'] .token.important,
pre[class*='language-'] .token.important {
color: #e9c062;
}

code[class*='language-'] .token.important,
pre[class*='language-'] .token.important,
code[class*='language-'] .token.bold,
pre[class*='language-'] .token.bold {
font-weight: bold;
}

code[class*='language-'] .token.italic,
pre[class*='language-'] .token.italic {
font-style: italic;
}

code[class*='language-'] .token.entity,
pre[class*='language-'] .token.entity {
cursor: help;
}

html body {
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans,
  sans-serif;
font-size: 16px;
line-height: 1.6;
color: #c5c8c6;
background-color: #1d1f21;
overflow: initial;
box-sizing: border-box;
word-wrap: break-word;
}

html body > :first-child {
margin-top: 0;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
line-height: 1.2;
margin-top: 1em;
margin-bottom: 16px;
color: #fff;
}

html body h1 {
font-size: 2.25em;
font-weight: 300;
padding-bottom: 0.3em;
}

html body h2 {
font-size: 1.75em;
font-weight: 400;
padding-bottom: 0.3em;
}

html body h3 {
font-size: 1.5em;
font-weight: 500;
}

html body h4 {
font-size: 1.25em;
font-weight: 600;
}

html body h5 {
font-size: 1.1em;
font-weight: 600;
}

html body h6 {
font-size: 1em;
font-weight: 600;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5 {
font-weight: 600;
}

html body h5 {
font-size: 1em;
}

html body h6 {
color: #9ba09d;
}

html body strong {
color: #fff;
}

html body del {
color: #9ba09d;
}

html body a:not([href]) {
color: inherit;
text-decoration: none;
}

html body a {
color: #ddd;
text-decoration: none;
}

html body a:hover {
color: #cecece;
text-decoration: none;
}

html body img {
max-width: 100%;
}

html body > p {
margin-top: 0;
margin-bottom: 16px;
word-wrap: break-word;
}

html body > ul,
html body > ol {
margin-bottom: 16px;
}

html body ul,
html body ol {
padding-left: 2em;
}

html body ul.no-list,
html body ol.no-list {
padding: 0;
list-style-type: none;
}

html body ul ul,
html body ul ol,
html body ol ol,
html body ol ul {
margin-top: 0;
margin-bottom: 0;
}

html body li {
margin-bottom: 0;
}

html body li.task-list-item {
list-style: none;
}

html body li > p {
margin-top: 0;
margin-bottom: 0;
}

html body .task-list-item-checkbox {
margin: 0 0.2em 0.25em -1.8em;
vertical-align: middle;
}

html body .task-list-item-checkbox:hover {
cursor: pointer;
}

html body blockquote {
margin: 16px 0;
font-size: inherit;
padding: 0 15px;
color: #9ba09d;
border-left: 4px solid #43484c;
}

html body blockquote > :first-child {
margin-top: 0;
}

html body blockquote > :last-child {
margin-bottom: 0;
}

html body hr {
height: 4px;
margin: 32px 0;
background-color: #43484c;
border: 0 none;
}

html body table {
margin: 10px 0 15px 0;
border-collapse: collapse;
border-spacing: 0;
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
}

html body table th {
font-weight: bold;
color: #fff;
}

html body table td,
html body table th {
border: 1px solid #43484c;
padding: 6px 13px;
}

html body dl {
padding: 0;
}

html body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}

html body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}

html body code {
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 0.85em !important;
color: #fff;
background-color: #303337;
border-radius: 3px;
padding: 0.2em 0;
}

html body code::before,
html body code::after {
letter-spacing: -0.2em;
content: '\00a0';
}

html body pre > code {
padding: 0;
margin: 0;
font-size: 0.85em !important;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}

html body .highlight {
margin-bottom: 16px;
}

html body .highlight pre,
html body pre {
padding: 1em;
overflow: auto;
font-size: 0.85em !important;
line-height: 1.45;
border: #43484c;
border-radius: 3px;
}

html body .highlight pre {
margin-bottom: 0;
word-break: normal;
}

html body pre code,
html body pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}

html body pre code:before,
html body pre tt:before,
html body pre code:after,
html body pre tt:after {
content: normal;
}

html body p,
html body blockquote,
html body ul,
html body ol,
html body dl,
html body pre {
margin-top: 0;
margin-bottom: 16px;
}

html body kbd {
color: #fff;
border: 1px solid #43484c;
border-bottom: 2px solid #35393c;
padding: 2px 4px;
background-color: #303337;
border-radius: 3px;
}

@media print {
html body {
  background-color: #1d1f21;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  color: #fff;
  page-break-after: avoid;
}

html body blockquote {
  color: #9ba09d;
}

html body pre {
  page-break-inside: avoid;
}

html body table {
  display: table;
}

html body img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

html body pre,
html body code {
  word-wrap: break-word;
  white-space: pre;
}
}

html body a {
text-decoration: underline;
}

.markdown-preview {
width: 100%;
height: 100%;
box-sizing: border-box;
}

.markdown-preview .pagebreak,
.markdown-preview .newpage {
page-break-before: always;
}

.markdown-preview pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}

.markdown-preview pre.line-numbers > code {
position: relative;
}

.markdown-preview pre.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 1em;
font-size: 100%;
left: 0;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.markdown-preview pre.line-numbers .line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}

.markdown-preview pre.line-numbers .line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}

.markdown-preview .mathjax-exps .MathJax_Display {
text-align: center !important;
}

.markdown-preview:not([for='preview']) .code-chunk .btn-group {
display: none;
}

.markdown-preview:not([for='preview']) .code-chunk .status {
display: none;
}

.markdown-preview:not([for='preview']) .code-chunk .output-div {
margin-bottom: 16px;
}

.scrollbar-style::-webkit-scrollbar {
width: 8px;
}

.scrollbar-style::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}

.scrollbar-style::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(150, 150, 150, 0.66);
border: 4px solid rgba(150, 150, 150, 0.66);
background-clip: content-box;
}

html body[for='html-export']:not([data-presentation-mode]) {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
overflow: auto;
}

html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
position: relative;
top: 0;
}

@media screen and (min-width: 914px) {
html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
  padding: 2em calc(50% - 457px);
}
}

@media screen and (max-width: 914px) {
html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
  padding: 2em;
}
}

@media screen and (max-width: 450px) {
html body[for='html-export']:not([data-presentation-mode]) .markdown-preview {
  font-size: 14px !important;
  padding: 1em;
}
}

@media print {
html body[for='html-export']:not([data-presentation-mode]) #sidebar-toc-btn {
  display: none;
}
}

html body[for='html-export']:not([data-presentation-mode]) #sidebar-toc-btn {
position: fixed;
bottom: 8px;
left: 8px;
font-size: 28px;
cursor: pointer;
color: inherit;
z-index: 99;
width: 32px;
text-align: center;
opacity: 0.4;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
#sidebar-toc-btn {
opacity: 1;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
padding: 32px 0 48px 0;
font-size: 14px;
box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
box-sizing: border-box;
overflow: auto;
background-color: inherit;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc::-webkit-scrollbar {
width: 8px;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(150, 150, 150, 0.66);
border: 4px solid rgba(150, 150, 150, 0.66);
background-clip: content-box;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc
a {
text-decoration: none;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc
ul {
padding: 0 1.6em;
margin-top: 0.8em;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc
li {
margin-bottom: 0.8em;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.md-sidebar-toc
ul {
list-style-type: none;
}

html
body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
.markdown-preview {
left: 300px;
width: calc(100% - 300px);
padding: 2em calc(50% - 457px - 150px);
margin: 0;
box-sizing: border-box;
}

@media screen and (max-width: 1274px) {
html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .markdown-preview {
  padding: 2em;
}
}

@media screen and (max-width: 450px) {
html
  body[for='html-export']:not([data-presentation-mode])[html-show-sidebar-toc]
  .markdown-preview {
  width: 100%;
}
}

html
body[for='html-export']:not([data-presentation-mode]):not([html-show-sidebar-toc])
.markdown-preview {
left: 50%;
transform: translateX(-50%);
}

html
body[for='html-export']:not([data-presentation-mode]):not([html-show-sidebar-toc])
.md-sidebar-toc {
display: none;
}